angular表单验证2

前言

在之前的文章《angular表单验证》中主要介绍了一些关于angular表单验证的基础知识。在此篇中将着重以扩展angular表单验证的相关内容和实际开发中的应用为主。

---

表单验证使用场景1

在实际的开发中我们可能会有这样的情况。我们希望可以在用户输入完成之后失去焦点之后进行验证。如果验证不通过则提交错误信息。如果想要实现这个效果。需要添加一个自定义的指令。

app.directive('ngFoucus',[function(){
var FOCUS_CLASS='ng-focused';
return{
restrict:'A',
require:'ngModel',
link:function(scope,element,attrs,ctrl){
        ctrl.$focused=false;

element.bind('focus',function(evt){
element.addclass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=true;});
}).
bind('blur',function(evt){
element.removeClass(FOCUS_CLASS);
scope.$apply(function(){
 ctrl.$focused=false;});});}}
}]);

将ngFocus指令添加到input元素上就可以使用这个指令。

<input ng-class="{error:signup_form.name.$dirty&&signup_form.name.$invalid}"
  type="text"
placeholder="name"
name="name"
ng-model="signup.name"
ng-minlength="3"
ng-maxlength="200
required"
ng-focus
/>

ngFocus指令给表单输入字段的blur和focus添加了对应的行为。添加了一个名为ng-foucsed的类并将$focused的值设置为true。接下来，可以根据表单是否具有焦点来展示独立的错误信息。如下

<div class="error" ng-show="signup_form.name.$dirty&&signup_form.name.$invalid&&!signup_form.name.$focused">
</div>

当然也可以在ngModel控制中使用$isEmpty()方法来判断输入的字段是否为空。当输入字段为空时返回true否则返回false。

angular新版本的表单验证

在之前的代码中angular的表单验证是相对比较复杂的组件。用起来并不是特别的方便。也不够简洁。
但是在新得angular版本以后（1.3+）我们可以使用更简单的方式来做表单验证。

ng-messages

要使用ng-messages这个指令。我们必须先安装这个模块。我们可以自己下载下来直接引用到页面上，或者使用
$bower install --save angular-messages 来安装
，安装完成之后呢。我们需要注入 到模块中

angular.module('myapp',['ngMessages'])

为了对比之前的表单验证方式，这里我先使用老版本的表单验证写一个例子。

/*old*/

<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<fieldset>
<legend>Signup</legend>
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-show="signup_form.name.$dirty&&gignup_form.name&invalid&&signup_form.submitted">
<small class="error" ng-show="signup_form.name.$error.required">姓名不能为空</small>
<small class="error" ng-show="signup_form.name.$error.minlength">姓名太短</small>
<small class="error" ng-show="signup_form.name.$error.maxlength">姓名太长</small>
</div>
</div>
</div>
</fieldset>
</form>





/*new*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController">
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名太短</div>
<div ng-message="maxlength">姓名太长</div>
</div>
</div>
</div>
</form>

借助ngMessages 表单本身比之前的更简单了。并且更好理解。但是在上面的代码中还有一个问题，就是一次只能显示一个错误信息。
如果我们想同时显示所有的错误信息。也简单，我们只需在ng-messages 指令旁边加上 ng-messages-multiple

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-multiple>
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名太短</div>
<div ng-message="maxlength">姓名太长</div>
</div>

如果我们有很多的表单页的话。我们可以把一些通用的验证提示封装套一个模板页面中

<!--in temples/errors.html-->
<div ng-message="required">姓名不能为空</div>
<div ng-message="minlength">姓名太短</div>
<div ng-message="maxlength">姓名太长</div>

然后我们可以在视图中使用 ng-messages-include 属性来引入这个模板来改进表单的结构

<div class="error" ng-messages="signup_form.name.$error"  ng-messages-include="templates/errors.html"></div>

上面的示例当中都是使用angular自带的验证和ng-messages结合使用。那自定义验证如何操作呢？
比方说我想要创建一个自定义验证来实现验证表单中的用户名是否被注册：

/*首先创建一个自定义指令*/
app.directive('ensureUnique',function($http){
return {
require:'ngmodel',
link:function(scope,ele,attrs,ctrl){
var url=attrs.ensureUnique;
   ctrl.$parsers.push(function(val){
 if(!val||val.length==0)
retrun;
});
ngModel.$setValidity('checkingAvailability',true);
ngModel.$setValidity('usernameAvailablity',false);
$http({
 Method:'GET',
url:url,
params:{
username:val}
}).success(function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',true);
})['catch'](function(){
 ngModel.$setValidity('checkingAvailability',false);
ngModel.$setValidity('usernameAvailablity',false);
});
retrun val;
}
}
});

/*页面html*/
<form name="signup_form" novalidate ng-submit="signupForm()" ng-controller="signupController" ensure-unique='/api/checkUsername.php'>
<div class="row">
<div  class="large-12 columns">
<label>Your name</label>
<input type="text" placeholder="Name" name="name" ng-model="signup.name" ng-minlength=3 ng-maxlength=20 required/>
<div class="error" ng-messages="signup_form.name.$error">
<div ng-message="required">姓名不能为空</div>
<div ng-message="checkingAvailability">checking</div>
<div ng-message="usernameAvailablity">用户名已经存在</div>
</div>
</div>
</div>
</form>

在上面的用法中我们检查了错误信息的自定义属性。为了添加自定义的错误信息，我们将会把它们应用到自定义的ensureUnique指令的ngModel中。
这样一个自定义验证就完成了。在这里我只是演示了一个自定义验证的用法。angular的ng-messages还有很多其他的高级用法这里就不再一一介绍了。有兴趣的同学可以去angular官网查看文档。

结尾

以上就是关于angular表单验证的全部内容。本文作为自己的笔记的方式写了下来。文中的如有不足之处请指出。如果有问题的话可以留言。谢谢。